<!DOCTYPE HTML>
<html lang="zh-cn" ng-app="myDirective">
<head>
    <meta charset="UTF-8">
    <title>directive</title>
    <style type="text/css">
        .ng-cloak {
            display: none;
        }
    </style>
</head>
<body ng-controller="MyCtrl">
<div ng-model="content" contenteditable="true">My Little Dada</div>
<pre class="ng-cloak">modelValue = {{content}}</pre>
<button ng-click="reset()">reset(change model)</button>
<script src="../angular-1.0.1.js" type="text/javascript"></script>
<script type="text/javascript">
    angular.module("myDirective",[])
            .directive("contenteditable",function() {
                return {
                    require:'ngModel',
                    link:function (scope, element, attr, ngModel) {
                        function setVal() {
                            ngModel.$setViewValue(element.text());
                        }

                        // veiw -> model
                        element.bind("keyup",function() {
                            scope.$apply(setVal);
                        });
                        // model -> view
                        ngModel.$render = function(val) {
                            console.log("render running");
                            element.html(val);
                        };
                        //init
                        setVal();
                    }
                }
            }
    ).controller("MyCtrl",function($scope) {
                $scope.reset = function() {
                        $scope.content = "My Little Dada";
                };
            });
</script>
</body>
</html>